<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            省：
            <select v-model="province">
                <option value="请选择" selected disabled>请选择</option>
                <option :value="item.name" v-for="item in list">{{item.name}}</option>
            </select>
        </div>
        <div>
            市:
            <select v-model="city">
                <option value="请选择" selected disabled>请选择</option>
                <option :value="cItem" v-for="cItem in cityArr">{{cItem}}</option>
            </select>
        </div>
        <div>
            区：
            <select v-model="area">
                <option value="请选择" selected disabled>请选择</option>
                <option :value="aItem" v-for="aItem in areaArr">{{aItem}}</option>
            </select>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                province:'请选择',
                city:'请选择',
                area:'请选择',
                list:[
                    {
                        name:"河北省",
                        city:[
                            {
                                name:"石家庄市",
                                area:["长安区","裕华区","桥东区"]
                            }
                        ]
                    },
                    {
                        name:"山西省",
                        city:[
                            {
                                name:"大同市1",
                                area:["兴周区1","大同区1","南郊区1"]
                            },
                            {
                                name:"大同市2",
                                area:["兴周区2","大同区2","南郊区2"]
                            }
                        ]
                    }
                ]
            },
            computed:{
                cityArr(){
                    this.city = '请选择';
                    let target = this.list.find(item => item.name === this.province);

                    return target ? target.city.map(cItem => cItem.name) : [];
                },
                areaArr(){
                    this.area = '请选择';
                    let arr = [];

                    this.list.forEach(item => {
                        if(item.name === this.province){
                            item.city.forEach(cItem => {
                                if(cItem.name === this.city){
                                    arr = cItem.area
                                }
                            })
                        }
                    })
                    return arr
                }
            }
        })
    </script>
</body>
</html>